<template>
    <div>
        <div><button @click="isShow = !isShow">显示/隐藏</button></div>
        <!-- <transition name="feature"> -->
        <transition enter-active-class="animate__animated animate__rotateIn"
                    leave-active-class="animate__animated animate__hinge">
          <h2 class="title" v-if="isShow">Hello World</h2>
        </transition>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                isShow: true
            }
        },
        methods: {
            
        }
    }
</script>

<style scoped>
    .title {
        display: inline-block;
    }

    /* 注释掉之后使用过渡class */
    /* .feature-enter-active {
        animation: bounceOut 1s ease-in;
    }

    .feature-leave-active {
        animation: bounceOut 1s ease-in reverse;
    } */

</style>